import { defineComponent, onMounted, ref, onBeforeUnmount } from "vue";
import styles from "./home.module.less";
import BannerArea from "./bannerArea/bannerArea";
import InsuranceProduct from "./insuranceProduct/insuranceProduct";
import Service from "./service/service";
import CooperateCompany from "./cooperateCompany/cooperateCompany";
import { imgPath } from "@/common/utils";
export default defineComponent({
  name: 'home',
  setup() {
    //我的收藏
    const MyCollection = () => (
      <div class={styles.myCollection}>
        <div class={styles['no-message']}>
          <img src={imgPath('/home/no-message.jpg')} />
        </div>
      </div>
    )
    //下载app
    const DownloadAPP = () => (
      <div class={styles.downloadAPP}>
        {/* <img src={imgPath('/home/downloadAPP.png')} /> */}
      </div>
    )
    //公众号
    const OfficialAccounts = () => (
      <div class={styles.officialAccounts}>
        {/* <img src={imgPath('/home/guanzhu.jpg')} /> */}
      </div>
    )
    const flag_scroll = ref(false);

    const scrollTops = ref(0);

    const backTop = () => {
      // const dom: any = document.getElementById('app');
      // dom.scrollTop = 0;
    }
    const handleScroll = (e: any) => {
      let scrollTop = e.target.scrollTop;
      scrollTops.value = scrollTop;
      if (scrollTop > 800) {
        flag_scroll.value = true;
      } else {
        flag_scroll.value = false;
      }
    }
    onMounted(() => {
      // window.addEventListener("scroll", handleScroll, true);
    })
    onBeforeUnmount(() => {
      // window.removeEventListener("scroll", handleScroll);
    })

    //右侧导航栏
    const FloatNavBar = () => (
      <div class={styles.floatNavBar}>
        <a-dropdown placement="left" v-slots={{
          overlay: () => (
            <MyCollection />
          )
        }}>
          <div class={styles['floatNavBar-item']}>
            <img src={imgPath('/home/aixin-acitived.png')} class={styles.noActived} />
            <img src={imgPath('/home/aixin.png')} class={styles.actived} />
            <span>我的收藏</span>
          </div>
        </a-dropdown>
        <a-dropdown placement="left" v-slots={{
          overlay: () => (
            <DownloadAPP />
          )
        }}>
          <div class={styles['floatNavBar-item']}>
            <img src={imgPath('/home/floatNavBar-img2.png')} class={styles.noActived} />
            <img src={imgPath('/home/floatNavBar-img1.png')} class={styles.actived} />
            <span>下载APP</span>
          </div>
        </a-dropdown>
        <div class={styles['floatNavBar-item']}>
          <img src={imgPath('/home/floatNavBar-img4.png')} class={styles.noActived} />
          <img src={imgPath('/home/floatNavBar-img3.png')} class={styles.actived} />
          <span>在线客服</span>
        </div>
        <a-dropdown placement="left" v-slots={{
          overlay: () => (
            <OfficialAccounts />
          )
        }}>
          <div class={styles['floatNavBar-item']}>
            <img src={imgPath('/home/floatNavBar-img6.png')} class={styles.noActived} />
            <img src={imgPath('/home/floatNavBar-img5.png')} class={styles.actived} />
            <span>公众号</span>
          </div>
        </a-dropdown>
        {
          flag_scroll.value == true ?
            <div class={styles['floatNavBar-item']} onClick={() => { backTop() }}>
              <img src={imgPath('/home/arrow.png')} class={styles.noActived} />
              <img src={imgPath('/home/arrow-actived.png')} class={styles.actived} />
              <span>顶部</span>
            </div> : ''
        }
      </div>
    )

    return () => (
      <div class={styles.container}>
        <BannerArea />
        <InsuranceProduct />
        <Service />
        <CooperateCompany />
        {/* <FloatNavBar /> */}
      </div>
    )
  }
})